<template>
	<view class="page">
		<nav-bar :title="title" bgColor="#f5f5f5"></nav-bar>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
		<view class="input_form_box">
			<view class="input_box">
				<view class="name">姓名</view>
				<view class="input_info"><input type="text" v-model="receiveName" placeholder="请输入姓名" /></view>
			</view>
			<view class="input_box">
				<view class="name">性别</view>
				<view class="radio_box">
					<view :class="{ active: sexMan }" @click="onSexMan(true)">男</view>
					<view :class="{ active: !sexMan }" @click="onSexMan(false)">女</view>
				</view>
			</view>
			<view class="input_box">
				<view class="name">手机</view>
				<view class="input_info"><input type="number" v-model="phone" placeholder="请输入手机" maxlength="11" /></view>
			</view>
			<view class="input_box">
				<view class="name">位置</view>
				<view class="select_info" @click="popupShow = true">
					<text class="value" v-if="addressInfo.areaId">{{ addressInfo.provinceName }}{{ addressInfo.cityName }}{{ addressInfo.areaName }}</text>
					<text class="select" v-else="">请选择位置</text>
				</view>
			</view>
			<view class="input_box">
				<view class="name">详细地址</view>
				<view class="input_info"><input type="text" v-model="address" placeholder="请输入详细地址" /></view>
			</view>
		</view>
        <view class="auto_recognition_box" :class="{show: recognition}">
            <view class="name">
                <view>智能填写</view>
                <text class="arrow" @click="recognition = !recognition"></text>
            </view>
            <textarea v-model="discern" placeholder="粘贴地址信息，可自动识别并填写，如：小明，133********，广东省 深圳市 xx区 xx街道 xxxx" />
            <view class="btn_box">
                <!-- #ifndef H5 -->
                <button @click="onPaste">粘贴</button>
                <!-- #endif -->
                <button class="active" @click="onDiscern">识别</button>
            </view>
        </view>
        <view class="input_form_box top">
        	<view class="input_box">
        		<view class="name">设置为默认地址</view>
        		<view class="switch active"></view>
        	</view>
        </view>
		<view class="form_but"><button class="active" @click="onSubmit">确定添加</button></view>
		<address-popup v-model="popupShow" :length="3" @change="addressChange"></address-popup>
	</view>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
import addressPopup from '@/components/common/address_popup';
// import addressParse from '@/plugins/addressParse/index';
import addressParse from '@/plugins/addressParse.min.js';
export default {
	components:{
		addressPopup
	},
	data() {
		return {
			//姓名
			receiveName: '',
			//性别
			sexMan: true,
			//手机号
			phone: '',
			//详细地址
			address: '',
			addressInfo: {},
			popupShow: false,
			title:"添加收货地址",
            // 识别的数据
            discern: "",
            recognition: false
		};
	},
	//第一次加载
	onLoad(e) {
		if (e.objId) {
			this.objId = e.objId;
			uni.setNavigationBarTitle({
				title: '修改收货地址'
			});
			this.title = '修改收货地址';
			this.pageData();
		}
	},
	//方法
	methods: {
		pageData() {
			this.$http
				.get('api/mime/address/v1/info', {
					objId: this.objId
				})
				.then(res => {
					this.receiveName = res.receiveName;
					this.sexMan = res.sexMan;
					this.phone = res.phone;
					this.address = res.address;
					this.addressInfo = {
						provinceId: res.provinceId,
						provinceName: res.provinceName,
						cityId: res.cityId,
						cityName: res.cityName,
						areaId: res.areaId,
						areaName: res.areaName, 
					};
				});
		},
        // 获取粘贴板信息
        onPaste(){
            uni.getClipboardData({
                success: (res) => {
                    this.discern = res.data;
                }
            });
        },
        onDiscern(){
            let addressInfo = addressParse(this.discern);
            if(addressInfo.name){
                this.receiveName = addressInfo.name;
            }
            if(addressInfo.phone){
                this.phone = addressInfo.phone;
            }
            if(addressInfo.detail){
                this.address = addressInfo.detail;
            }
            console.log(addressInfo);
        },
		//性别改变
		onSexMan(val) {
			this.sexMan = val;
		},
		addressChange(e){
			this.addressInfo = {
				"provinceId": e[0].objId,
				"provinceName": e[0].name,
				"cityId": e[1].objId,
				"cityName": e[1].name,
				"areaId": e[2].objId,
				"areaName": e[2].name,
			};
		},
		onSubmit() {
			if (this.receiveName == '') {
				uni.showToast({
					title: '请输入姓名',
					icon: 'none'
				});
				return;
			}
			if (this.phone == '') {
				uni.showToast({
					title: '请输入手机号',
					icon: 'none'
				});
				return;
			}
            if (!this.$base.phoneRegular.test(this.phone)) {
            	uni.showToast({
            		title: '手机号格式不正确',
            		icon: 'none'
            	});
            	return;
            }
			if (!this.addressInfo.areaId) {
				uni.showToast({
					title: '请选择位置',
					icon: 'none'
				});
				return;
			}
			if (this.address == '') {
				uni.showToast({
					title: '请输入详细地址',
					icon: 'none'
				});
				return;
			}
			let httpData = {
				address: this.address,
				phone: this.phone,
				receiveName: this.receiveName,
				sexMan: this.sexMan,
				areaId: this.addressInfo.areaId,
			};
			if(this.objId){
				httpData.objId = this.objId;
			}
			this.$http
				.post('api/mime/address/v1/edit', httpData)
				.then(res => {
					let content = "地址添加成功！";
					if(this.objId){
						content = "地址修改成功!";
					}
					uni.showModal({
						title:"提示",
						content:content,
						showCancel:false,
						success: (res) => {
							uni.navigateBack();
						}
					})
				});
		}
	},
	//页面隐藏
	onHide() {},
	//页面卸载
	onUnload() {},
	//页面下来刷新
	onPullDownRefresh() {},
	//页面上拉触底
	onReachBottom() {},
	//用户点击分享
	onShareAppMessage(e) {
		return this.wxShare();
	}
};
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';
.page {
	padding-top: 20rpx;
}
.input_form_box {
    margin: 0 30rpx;
    padding: 0 30rpx;
    background-color: #FFF;
    &.top {
        margin: 30rpx 30rpx 0 30rpx;
    }
    .input_box {
    	border-top: 1rpx solid #efefef;
        padding: 0;
    	&:first-child {
    		border-top: 0;
    	}
        .switch_box {
            flex: 1;
            display: flex;
            justify-content: flex-end;
        }
    }
}
.form_but {
    margin-top: 0rpx;
}
.auto_recognition_box {
    margin: 30rpx 30rpx 0 30rpx;
    padding: 0 30rpx;
    background-color: #FFF;
    height: 100rpx;
    overflow: hidden;
    transition: all 0.4s;
    &.show {
        height: 368rpx;
        .name .arrow {
            transform: rotate(-90deg);
        }
    }
    .name {
        padding: 30rpx 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        view {
            font-size: 28rpx;
            color: #333333;
        }
        .arrow {
            width: 12rpx;
            height: 24rpx;
            @include bis('../../../static/icon/ic_to.png');
            transform: rotate(90deg);
            transition: all 0.4s;
        }
    }
    textarea {
        width: 100%;
        height: 150rpx;
        font-size: 24rpx;
    }
    .btn_box {
        padding-top: 30rpx;
        display: flex;
        justify-content: flex-end;
        padding-bottom: 30rpx;
        button {
            width: 130rpx;
            height: 60rpx;
            line-height: 56rpx;
            border-radius: 8rpx;
            border: solid 1rpx $themeColor;
            color: $themeColor;
            font-size: 28rpx;
            margin-left: 30rpx;
            &.active {
                background-color: $themeColor;
                color: #FFF;
            }
        }
    }
}
</style>
